<template>
  <div>

    <div style="height:400px">

      <IEcharts :option="jqTimelist" />
    </div>
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import echarts from 'echarts'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        monthMonth: '3',
        // monthMonthValue: '',
        countPojo: {
          dateList: '',
          dateItem: '4',
          dateType: 'i'
        },
        jqTimelist: {
          title: {
            text: '全局本年月度工单处理量统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['办件数'],
            right: '3%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '办件数',
              type: 'line',
              stack: '总量',
              smooth: true,

              data: [],
              label: {
                show: false, // 开启显示
                // rotate: 70, // 旋转70度
                position: 'top', // 在上方显示
                distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                verticalAlign: 'middle',
                textStyle: { // 数值样式
                  color: '#3B80FF',
                  fontSize: 12
                }
              },
              itemStyle: {
                normal: {
                  width: 25,
                  color: '#B8D5FF', // 改变折线点的颜色
                  lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#9effff'
                    },
                    {
                      offset: 1,
                      color: '#9E87FF'
                    }
                    ]),
                    shadowColor: 'rgba(158,135,255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                  },
                }
              },
              // areaStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //     offset: 0,
              //     color: '#3B80FF'
              //   }, {
              //     offset: 1,
              //     color: '#B8D5FF'
              //   }])
              // }
            }

          ]
        }

      }
    },
    created () {
      this.getWholeNumberCharts()
    },
    methods: {
      getWholeNumberCharts () {
        this.countPojo.dateItem = this.monthMonth
        this.$axios.post(this.$api.countCharts.monthCharts, this.countPojo).then(
          res => {
            this.jqTimelist.xAxis[0].data = res.name.split(',')
            this.jqTimelist.series[0].data = res.number.split(',')
          }
        )
      }
    }
  }
</script>

<style>
</style>
